<!--
    /**
     * @author RaoShuang
     * @emil 991207823@qq.com
     * @date 2020/11/23 21:45
     */
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
            <h4>传统js的innerText和innerHTML</h4>
            <div id="div1"></div>
            <div id="div2"></div>
            <hr/>

            <h4>Vue方式</h4>
            <div v-text="message"></div>
            <div v-html="message"></div>
		</div>
	</body>
	<script>
        //传统js的innerText和innerHTML
        window.onload = function(){
            document.getElementById("div1").innerHTML="<h1>Hello</h1>";
            document.getElementById("div2").innerText="<h1>Hello</h1>";
        }

		//view model
        new Vue({
            el:"#app",
            data:{
                message:"<h1>Hello Vue</h1>"
            }
        });
	</script>
</html>
